<template>
  <view class="container">
    <!-- 银行标题栏 -->
    <view class="bank-header">
      <image class="bank-logo" src="/static/center-bank-logo.png"></image>
      <text class="bank-name">中信银行</text>
      <text class="loan-title">个人消费贷款还款明细</text>
    </view>

    <!-- 顶部汇总信息 -->
    <view class="header">
      <view class="summary-item">
        <text class="label">贷款总额</text>
        <text class="value">¥153,300.00</text>
      </view>
      <view class="summary-item">
        <text class="label">总利息</text>
        <text class="value">¥23,457.48</text>
      </view>
      <view class="summary-item">
        <text class="label">年利率</text>
        <text class="value">9.49%</text>
      </view>
    </view>

    <!-- 还款列表（确保高度和滚动） -->
    <scroll-view scroll-y class="repayment-list" :style="{height: scrollViewHeight + 'px'}">
      <view 
        v-for="(item, index) in repaymentData" 
        :key="index" 
        class="repayment-item"
        :class="{'repaid': index <= 9, 'unpaid': index > 9}"
      >
        <view class="bank-tag">
          <text class="bank-name">中信银行</text>
          <text class="divider">|</text>
          <text class="loan-type">信用贷-36期</text>
        </view>
        
        <view class="status-indicator" :class="{'repaid': index <= 9}"></view>
        
        <view class="date-row">
          <text class="date">{{ item.date }}</text>
          <text class="installment">第{{ index+1 }}期/共36期</text>
        </view>
        
        <view class="detail-row">
          <view class="amount-group">
            <text class="label">总还款</text>
            <text class="amount total">¥{{ formatAmount(item.totalPayment) }}</text>
          </view>
          <view class="amount-group">
            <text class="label">本金</text>
            <text class="amount principal">¥{{ formatAmount(item.principal) }}</text>
          </view>
          <view class="amount-group">
            <text class="label">利息</text>
            <text class="amount interest">¥{{ formatAmount(item.interest) }}</text>
          </view>
        </view>
        
        <view class="remaining-row">
          <text class="label">剩余本金</text>
          <text class="value">¥{{ formatAmount(item.remainingPrincipal) }}</text>
        </view>
      </view>
    </scroll-view>
  </view>
</template>
<script>
export default {
  data() {
      return {
	  scrollViewHeight: 0, // 动态计算的高度
      repaymentData: [
        { date: '2024-07-19', totalPayment: 4909.93, principal: 3697.58, interest: 1212.35, remainingPrincipal: 149602.42 },
        { date: '2024-08-19', totalPayment: 4909.93, principal: 3726.82, interest: 1183.11, remainingPrincipal: 145875.60 },
        { date: '2024-09-19', totalPayment: 4909.93, principal: 3756.30, interest: 1153.63, remainingPrincipal: 142119.30 },
        { date: '2024-10-19', totalPayment: 4909.93, principal: 3786.00, interest: 1123.93, remainingPrincipal: 138333.30 },
        { date: '2024-11-19', totalPayment: 4909.93, principal: 3815.94, interest: 1093.99, remainingPrincipal: 134517.36 },
        { date: '2024-12-19', totalPayment: 4909.93, principal: 3846.12, interest: 1063.81, remainingPrincipal: 130671.24 },
        { date: '2025-01-19', totalPayment: 4909.93, principal: 3876.54, interest: 1033.39, remainingPrincipal: 126794.70 },
        { date: '2025-02-19', totalPayment: 4909.93, principal: 3907.20, interest: 1002.73, remainingPrincipal: 122887.50 },
        { date: '2025-03-19', totalPayment: 4909.93, principal: 3938.10, interest: 971.83, remainingPrincipal: 118949.40 },
        { date: '2025-04-19', totalPayment: 4909.93, principal: 3969.24, interest: 940.69, remainingPrincipal: 114980.16 },
        { date: '2025-05-19', totalPayment: 4909.93, principal: 4000.63, interest: 909.30, remainingPrincipal: 110979.53 },
        { date: '2025-06-19', totalPayment: 4909.93, principal: 4032.27, interest: 877.66, remainingPrincipal: 106947.26 },
        { date: '2025-07-19', totalPayment: 4909.93, principal: 4064.16, interest: 845.77, remainingPrincipal: 102883.10 },
        { date: '2025-08-19', totalPayment: 4909.93, principal: 4096.30, interest: 813.63, remainingPrincipal: 98786.80 },
        { date: '2025-09-19', totalPayment: 4909.93, principal: 4128.69, interest: 781.24, remainingPrincipal: 94658.11 },
        { date: '2025-10-19', totalPayment: 4909.93, principal: 4161.34, interest: 748.59, remainingPrincipal: 90496.77 },
        { date: '2025-11-19', totalPayment: 4909.93, principal: 4194.25, interest: 715.68, remainingPrincipal: 86302.52 },
        { date: '2025-12-19', totalPayment: 4909.93, principal: 4227.42, interest: 682.51, remainingPrincipal: 82075.10 },
        { date: '2026-01-19', totalPayment: 4909.93, principal: 4260.85, interest: 649.08, remainingPrincipal: 77814.25 },
        { date: '2026-02-19', totalPayment: 4909.93, principal: 4294.55, interest: 615.38, remainingPrincipal: 73519.70 },
        { date: '2026-03-19', totalPayment: 4909.93, principal: 4328.51, interest: 581.42, remainingPrincipal: 69191.19 },
        { date: '2026-04-19', totalPayment: 4909.93, principal: 4362.74, interest: 547.19, remainingPrincipal: 64828.45 },
        { date: '2026-05-19', totalPayment: 4909.93, principal: 4397.25, interest: 512.68, remainingPrincipal: 60431.20 },
        { date: '2026-06-19', totalPayment: 4909.93, principal: 4432.02, interest: 477.91, remainingPrincipal: 55999.18 },
        { date: '2026-07-19', totalPayment: 4909.93, principal: 4467.07, interest: 442.86, remainingPrincipal: 51532.11 },
        { date: '2026-08-19', totalPayment: 4909.93, principal: 4502.40, interest: 407.53, remainingPrincipal: 47029.71 },
        { date: '2026-09-19', totalPayment: 4909.93, principal: 4538.00, interest: 371.93, remainingPrincipal: 42491.71 },
        { date: '2026-10-19', totalPayment: 4909.93, principal: 4573.89, interest: 336.04, remainingPrincipal: 37917.82 },
        { date: '2026-11-19', totalPayment: 4909.93, principal: 4610.06, interest: 299.87, remainingPrincipal: 33307.76 },
        { date: '2026-12-19', totalPayment: 4909.93, principal: 4646.52, interest: 263.41, remainingPrincipal: 28661.24 },
        { date: '2027-01-19', totalPayment: 4909.93, principal: 4683.27, interest: 226.66, remainingPrincipal: 23977.97 },
        { date: '2027-02-19', totalPayment: 4909.93, principal: 4720.30, interest: 189.63, remainingPrincipal: 19257.67 },
        { date: '2027-03-19', totalPayment: 4909.93, principal: 4757.63, interest: 152.30, remainingPrincipal: 14500.04 },
        { date: '2027-04-19', totalPayment: 4909.93, principal: 4795.26, interest: 114.67, remainingPrincipal: 9704.78 },
        { date: '2027-05-19', totalPayment: 4909.93, principal: 4833.18, interest: 76.75, remainingPrincipal: 4871.60 },
        { date: '2027-06-19', totalPayment: 4909.93, principal: 4871.40, interest: 38.53, remainingPrincipal: 0.20 }
      ]
    }
  }, onLoad() {
    this.calculateScrollViewHeight();
    uni.setNavigationBarTitle({
      title: '中信银行-还款明细'
    });
  },
  methods: {
    formatAmount(amount) {
      if (amount < 1) return amount.toFixed(2);
      return amount.toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ',');
    },
    calculateScrollViewHeight() {
      // 动态计算scroll-view高度
      const systemInfo = uni.getSystemInfoSync();
      const query = uni.createSelectorQuery().in(this);
      query.select('.header').boundingClientRect(header => {
        query.select('.bank-header').boundingClientRect(header => {
          this.scrollViewHeight = systemInfo.windowHeight - header.height - 40;
        }).exec();
      }).exec();
    }
  }
}
</script>

<style lang="scss">
page {
  background-color: #f5f6fa;
  height: 100%;
  box-sizing: border-box;
}

.container {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 0 20rpx;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

/* 银行标题栏样式 */
.bank-header {
  display: flex;
  align-items: center;
  padding: 20rpx 30rpx;
  background: linear-gradient(135deg, #1E88E5, #0D47A1);
  color: white;
  position: relative;
  width: 100%;
  box-sizing: border-box;
  
  .bank-logo {
    width: 80rpx;
    height: 80rpx;
    margin-right: 20rpx;
    border-radius: 50%;
    background-color: rgba(255,255,255,0.2);
    padding: 10rpx;
    flex-shrink: 0;
  }
  
  .bank-name {
    font-size: 36rpx;
    font-weight: bold;
    margin-right: 20rpx;
    white-space: nowrap;
  }
  
  .loan-title {
    font-size: 28rpx;
    opacity: 0.9;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
  }
}

.header {
  display: flex;
  justify-content: space-around;
  padding: 30rpx 20rpx;
  background-color: #fff;
  margin: 20rpx 0;
  border-radius: 16rpx;
  box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.05);
  width: 100%;
  box-sizing: border-box;
  
  .summary-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    min-width: 0;
    
    .label {
      font-size: 26rpx;
      color: #7a7a7a;
      margin-bottom: 8rpx;
      white-space: nowrap;
    }
    
    .value {
      font-size: 34rpx;
      font-weight: bold;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 100%;
      
      &::before {
        content: "¥";
        font-size: 0.8em;
        margin-right: 2rpx;
      }
    }
  }
}

.repayment-list {
  flex: 1;
  padding-bottom: 40rpx;
  width: 100%;
  box-sizing: border-box;
}

.repayment-item {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 24rpx;
  box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.05);
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  width: 100%;
  
  /* 已归还样式 */
  &.repaid {
    border-left: 8rpx solid #4CAF50;
  }
  
  /* 待归还样式 */
  &.unpaid {
    border-left: 8rpx solid #FF9800;
  }
  
  /* 银行标识 */
  .bank-tag {
    position: absolute;
    top: 0;
    left: 0;
    background-color: #1E88E5;
    padding: 6rpx 20rpx 6rpx 16rpx;
    border-bottom-right-radius: 16rpx;
    display: flex;
    align-items: center;
    max-width: 80%;
    
    .bank-name {
      color: white;
      font-size: 24rpx;
      font-weight: bold;
      white-space: nowrap;
    }
    
    .divider {
      color: rgba(255,255,255,0.5);
      margin: 0 12rpx;
      font-size: 22rpx;
    }
    
    .loan-type {
      color: white;
      font-size: 24rpx;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
  
  /* 状态指示器 */
  .status-indicator {
    position: absolute;
    top: 30rpx;
    right: 20rpx;
    width: 20rpx;
    height: 20rpx;
    border-radius: 50%;
    
    &.repaid {
      background-color: #4CAF50;
      box-shadow: 0 0 10rpx rgba(76,175,80,0.4);
    }
    
    &:not(.repaid) {
      background-color: #FF9800;
      box-shadow: 0 0 10rpx rgba(255,152,0,0.4);
    }
  }
  
  .date-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 24rpx;
    padding-top: 10rpx;
    width: 100%;
    
    .date {
      font-size: 30rpx;
      font-weight: bold;
      color: #333;
      white-space: nowrap;
    }
    
    .installment {
      font-size: 26rpx;
      color: #888;
      white-space: nowrap;
      margin-left: 20rpx;
    }
  }
  
  .detail-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20rpx;
    padding-bottom: 20rpx;
    border-bottom: 1rpx dashed #eee;
    width: 100%;
    
    .amount-group {
      display: flex;
      flex-direction: column;
      align-items: center;
      flex: 1;
      min-width: 0;
      
      .label {
        font-size: 26rpx;
        color: #999;
        margin-bottom: 10rpx;
        white-space: nowrap;
      }
      
      .amount {
        font-size: 30rpx;
        font-weight: 500;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
        
        &::before {
          content: "¥";
          font-size: 0.8em;
          margin-right: 2rpx;
        }
        
        &.total {
          color: #333;
          font-weight: 600;
        }
        
        &.principal {
          color: #4CAF50;
        }
        
        &.interest {
          color: #F44336;
        }
      }
    }
  }
  
  .remaining-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    
    .label {
      font-size: 26rpx;
      color: #666;
      white-space: nowrap;
    }
    
    .value {
      font-size: 28rpx;
      font-weight: bold;
      color: #1E88E5;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 60%;
      
      &::before {
        content: "¥";
        font-size: 0.8em;
        margin-right: 2rpx;
      }
    }
  }
}
</style>